'use client';

import React, { useState } from 'react';
import { Button, Space } from 'antd';
import RichTextEditor from './index';

const RichTextEditorTest: React.FC = () => {
  const [value, setValue] = useState('<p>测试内容</p>');
  const [showEditor, setShowEditor] = useState(true);
  const [key, setKey] = useState(0);

  const handleChange = (newValue: string) => {
    setValue(newValue);
    console.log('Editor value changed:', newValue);
  };

  const toggleEditor = () => {
    setShowEditor(!showEditor);
  };

  const remountEditor = () => {
    setKey(prev => prev + 1);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>RichTextEditor 测试</h2>
      
      <Space style={{ marginBottom: '20px' }}>
        <Button onClick={toggleEditor}>
          {showEditor ? '隐藏编辑器' : '显示编辑器'}
        </Button>
        <Button onClick={remountEditor}>
          重新挂载编辑器
        </Button>
      </Space>

      {showEditor && (
        <div key={key}>
          <RichTextEditor
            value={value}
            onChange={handleChange}
            placeholder="请输入测试内容"
            height={300}
          />
        </div>
      )}

      <div style={{ marginTop: '20px' }}>
        <h3>当前值:</h3>
        <pre style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
          {value}
        </pre>
      </div>
    </div>
  );
};

export default RichTextEditorTest;
